import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';
/// 复选框
class YJCheckbox extends StatefulWidget {
  YJCheckbox({
    Key? key,
    this.size = 18,
    this.type = YJCheckboxType.basic,
    this.activeBgColor = YJColors.PRIMARY,
    this.inactiveBgColor = YJColors.WHITE,
    this.activeBorderColor = YJColors.WHITE,
    this.inactiveBorderColor = YJColors.BLACK45,
    required this.onChanged,
    required this.value,
    this.activeIcon,
    this.inactiveIcon,
    this.customBgColor = YJColors.SUCCESS,
    this.autofocus = false,
    this.focusNode,
    this.validator,
  }) : super(key: key);

  /// 复选框类型
  final YJCheckboxType type;

  ///复选框尺寸
  final double size;

  ///选中背景颜色
  final Color activeBgColor;

  ///未选中背景颜色
  final Color inactiveBgColor;

  ///选中边框颜色
  final Color activeBorderColor;

  ///未选中边框颜色
  final Color inactiveBorderColor;

  ///状态改变回调
  final ValueChanged<bool>? onChanged;

  ///是否选中
  final bool value;

  ///选中图标样式
  Widget? activeIcon;

  ///未选中图标样式
  final Widget? inactiveIcon;

  ///自定义样式背景色
  final Color customBgColor;

  ///在真实状态下，当当前范围内没有其他节点处于焦点时，此复选框将被选为初始焦点
  final bool autofocus;

  ///一个可选的焦点节点，用作此复选框的焦点节点。
  final FocusNode? focusNode;

  ///验证器
  final FormFieldValidator<bool>? validator;

  @override
  _YJCheckboxState createState() => _YJCheckboxState();
}

class _YJCheckboxState extends State<YJCheckbox> {
  bool get enabled => widget.onChanged != null;
  bool _isChecked = false;

  @override
  void initState() {
    super.initState();
  }

  getActiveIcon() {
    return widget.activeIcon != null
        ? widget.activeIcon
        : Icon(
            Icons.check,
            size: widget.size - YJSize.dp(3),
            color: YJColors.WHITE,
          );
  }

  /// FormField表单组件
  @override
  Widget build(BuildContext context) => FormField<bool>(
        initialValue: _isChecked,
        validator: widget.validator,
        builder: (state) => Column(children: [
          FocusableActionDetector(
            focusNode: widget.focusNode,
            autofocus: widget.autofocus,
            enabled: enabled,
            child: InkResponse(
              highlightShape: widget.type == YJCheckboxType.circle
                  ? BoxShape.circle
                  : BoxShape.rectangle,
              containedInkWell: widget.type != YJCheckboxType.circle,
              canRequestFocus: enabled,
              onTap: widget.onChanged != null
                  ? () {
                      _isChecked = !widget.value;
                      state.didChange(!widget.value);
                      widget.onChanged!(!widget.value);
                    }
                  : null,
              child: Container(
                height: widget.size,
                width: widget.size,
                margin: widget.type != YJCheckboxType.circle
                    ? const EdgeInsets.all(0)
                    : EdgeInsets.zero,
                decoration: BoxDecoration(
                    color: enabled
                        ? widget.value
                            ? widget.type == YJCheckboxType.custom
                                ? Colors.white
                                : widget.activeBgColor
                            : widget.inactiveBgColor
                        : Colors.grey,
                    borderRadius: widget.type == YJCheckboxType.basic
                        ? BorderRadius.circular(3)
                        : widget.type == YJCheckboxType.circle
                            ? BorderRadius.circular(50)
                            : BorderRadius.zero,
                    border: Border.all(
                        color: widget.value
                            ? widget.type == YJCheckboxType.custom
                                ? Colors.black87
                                : widget.activeBorderColor
                            : widget.inactiveBorderColor)),
                child: widget.value
                    ? widget.type == YJCheckboxType.custom
                        ? Stack(
                            children: <Widget>[
                              Container(
                                alignment: Alignment.center,
                              ),
                              Container(
                                margin: const EdgeInsets.all(5),
                                alignment: Alignment.center,
                                width: widget.size * 0.8,
                                height: widget.size * 0.8,
                                decoration: BoxDecoration(
                                    shape: BoxShape.rectangle,
                                    color: widget.customBgColor),
                              )
                            ],
                          )
                        : getActiveIcon()
                    : widget.inactiveIcon,
              ),
            ),
          ),
          state.hasError
              ? Text(
                  state.errorText!,
                  style: TextStyle(color: Theme.of(context).colorScheme.error),
                )
              : Container(),
        ]),
      );
}
